
<script setup>
import {ref} from 'vue'
const SeleValue = ref(false)
const isDel = ref(false)
const onRadio = ()=>{
	isDel.value = !isDel.value

}
const toAddRecord =()=>{
	uni.navigateTo({
		url:'../../pages/addRecord/addRecord'
	})
}
</script>

<template>
	<view class="content">
		<view class="nav">
		
			<button @click="SeleValue = true" :class="{'btn':true, 'onbtn-class' :SeleValue}">
				<view class="icon-yuan" >
					
				</view>
				记录
				<view class="icon-yuan" >
					
				</view>
				</button>
			<button @click="SeleValue = false" :class="{'btn':true, 'onbtn-class' :!SeleValue}">
				<view class="icon-yuan">
					
				</view>
				提醒
				<view class="icon-yuan" >
					
				</view>
				</button>
		</view>
		<view class="date-sele">
				<uni-datetime-picker type="date" :clear-icon="false" v-model="single" @maskClick="maskClick" />
		</view>
		<RecordInfo v-for="item in 10 " :key="item" v-if="SeleValue">
			<template #num>
				300ml
			</template>
			<template #icon>
				<!-- 如果前面有值则下面的type更换成plusempty -->
				<uni-icons type="right"></uni-icons>
			</template>
		</RecordInfo>
		
		<view v-else class="warn">
			<view class="warn-top">
				<view  class="top-li">
					<view style="background-color: #ffeb3b;" class="li-left">
						
					</view>
					<view>日常提醒</view>
					
				</view>
				<view class="top-li">
					<view style="background-color: #b0f8ff;" class="li-left">
						
					</view>
					<view>洗护提醒</view>
					
				</view>
				<view  class="top-li">
					<view style="background-color: #ffc2b0;" class="li-left">
						
					</view>
					<view>清洁提醒</view>
					
				</view>
				<view  class="top-li">
					<view style="background-color: #d2b0ff;" class="li-left">
						
					</view>
					<view>用药提醒</view>
					
				</view>
			</view>
			<!-- 有数据 -->
			<view class="">
	         <Recordwarn />
				<view class="nowarn">
					
						<view @click="toAddRecord" class="warn-image fiex-image">
							<image style="width: 100%; height: 100%;" src="../../static/record/addwarn.png" mode=""></image>
						</view>
					
					
							
					
				</view>
			</view>
				
			<!-- 当没有提醒时出现的盒子 -->
		<!-- 	<view class="nowarn">
				<view class="warn-image">
					<image style="width: 100%; height: 100%;" src="../../static/record/addwarn.png" mode=""></image>
				</view>
				<text>还没有提醒哦~</text>
			</view> -->
			
			
		</view>
	</view>
</template>


<style lang="scss" scoped>
	.fiex-image{
		position: absolute;
		bottom: -150rpx;
		right: -5rpx;
		transform: rotateZ(-15deg);
	}
	.onisdel{
		text-decoration: line-through;
	}
	.onbtn-class{
		background-color: #ffeb3b;
	}
.content{
	position: relative;
	
	.nav{
		display: flex;
	
		.btn{
			display: flex;
			justify-content:space-between;
			align-items: center;
			width: 308rpx;
			height: 88rpx;
			border-radius: 50rpx;
			border: 2px solid black;
			line-height: 88rpx;
			font-size: 32rpx;
			font-weight: 700;
		
			.icon-yuan{
				width: 10rpx;
				height: 10rpx;
				background-color: #fff3be;
				border: 2px solid black;
				border-radius: 10rpx;
			}
		}
	}
	.date-sele{
	width: 690rpx;
	margin: 20rpx auto;
	border-radius: 30rpx;
	overflow: hidden;
	border: 2px solid black;
	}
.warn{
	padding-top: 10rpx;
	.warn-top{
		display: flex;
		justify-content: space-around;
		.top-li{
			display: flex;
			align-items: center;
			font-size: 24rpx;
			.li-left{
				width: 20rpx;
				height: 28rpx;
				
				border-radius: 20rpx;
				border: 2px solid black;
				margin-right: 10rpx;
				
			}
		}
	}
	.nowarn{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-top: 50%;
		transform: translateY(-50%);
		.warn-image{
			width: 90rpx;
			height: 100rpx;
			margin-bottom: 30rpx;
		}
		text{
			font-size: 32rpx;
			color: #81817b;
		}
	}
	
}
}
</style>
